<template>
  <div class="icons">
    <div class="icon border-right" v-for="item of iconList" :key="item.id">
      <i class="iconfont" :style="item.iconBg">{{item.iconContent}}</i>
      <p>{{item.iconDec}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  data () {
    return {
      iconList: [
        {
          id: '001',
          iconBg: 'background: #ffc107',
          iconContent: '\ue639',
          iconDec: '类目'
        },
        {
          id: '002',
          iconBg: 'background: #91a7ff',
          iconContent: '\ue635',
          iconDec: '活动馆'
        },
        {
          id: '003',
          iconBg: 'background: #ef5388',
          iconContent: '\ue606',
          iconDec: '伊日惠'
        },
        {
          id: '004',
          iconBg: 'background: #ff8861',
          iconContent: '\ue60f',
          iconDec: '个人中心'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .icons
    background #ffffff
    height 0
    width 100%
    overflow hidden
    padding-bottom 25%
    .icon
      float left
      width 25%
      padding-bottom 25%
      position relative;
      i
        color #ffffff
        position: absolute
        left .43rem
        top .2rem
        display inline-block
        width 1rem
        height 1rem
        line-height 1rem
        border-radius .6rem
        font-size .7rem
        text-align center
      p
        position absolute
        top 1.4rem
        text-align center
        width 100%
        color $darkTextColor
        font-size .3rem
</style>
